<template>

  <el-row class="bodyStyle">
    <el-col
      v-for="(item, index) in booklist"
      :key="item"
      :span="3"
      style="margin: 5px 15px;"
    >
      <el-card :body-style="{padding:'0'}">
        <img
          :src="item.image"
          class="image"
        />
        <div style="padding: 2px;font-size: 4px;">
          <span>{{item.bookName}}</span>
		  
          <div class="bottom">
			<el-button type="primary" plain class="button">{{item.bookNum}}本</el-button>
            <el-button type="danger" plain class="button" @click="borrow(item)">借阅</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <!-- 分页-->
  <!-- <el-row>
      <el-col :span="24">
  		<el-pagination background layout="prev, pager, next" :total="1000" />
  	</el-col>
  </el-row> -->
  <!-- 弹窗-->
  <el-dialog v-model="dialogVisible" title="" width="50%" draggable>
      <span>书籍，人类进步的阶梯</span>
	  <!-- 介绍-->
		<el-descriptions
		    class="margin-top"
		    title="书籍卡片"
		    :column="3"
		    border
		  >
		    <template #extra>
		      <!-- <el-button type="primary">Operation</el-button> -->
		    </template>
		    <el-descriptions-item>
		      <template #label>
		        <div class="cell-item">
		          <el-icon >
		            <user />
		          </el-icon>
		          书名：
		        </div>
		      </template>
		      {{detail.bookName}}
		    </el-descriptions-item>
		    <el-descriptions-item>
		      <template #label>
		        <div class="cell-item">
		          <el-icon >
		            <iphone />
		          </el-icon>
		          作者：
		        </div>
		      </template>
		      {{detail.bookAuthor}}
		    </el-descriptions-item>
		    <el-descriptions-item>
		      <template #label>
		        <div class="cell-item">
		          <el-icon >
		            <location />
		          </el-icon>
		          图书编号：
		        </div>
		      </template>
		      {{detail.bookRemark}}
		    </el-descriptions-item>
		    <el-descriptions-item>
		      <template #label>
		        <div class="cell-item">
		          <el-icon >
		            <tickets />
		          </el-icon>
		          库存
		        </div>
		      </template>
		      <el-tag size="small">{{detail.bookNum}}本</el-tag>
		    </el-descriptions-item>
		    <el-descriptions-item>
		      <template #label>
		        <div class="cell-item">
		          <el-icon >
		            <office-building />
		          </el-icon>
		          归还日期
		        </div>
		      </template>
		      <!-- 日期选择 -->
			  <el-date-picker
			          v-model="value1"
			          type="date"
			          placeholder="Pick a day"
					  :disabled-date="disabledDate"
					  value-format="YYYY-MM-DD"
					  @change="sTime"
			        />
		    </el-descriptions-item>
		  </el-descriptions>
		  
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addBorrow">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>

</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'

import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from '@element-plus/icons-vue'
import api from '../api';
import mitt from '../utils/mitt';
const dialogVisible = ref(false)
const value1 = ref('')
const emit = defineEmits(['get-msg'])
const sTime = ()=>{
	detail.returnTime=value1.value
}
const addBorrow = ()=>{
	detail.userId=localStorage.getItem('id')
	console.log("详情",detail)
	api.borrowApi(detail).then(res=>{
		if(res.data.status=='success'){
			emit('get-msg',res.data.msg)
			flash()
			dialogVisible.value = false
		}
		
	})
}
const disabledDate = (time: Date) => {
  return time.getTime() < Date.now()
}
const booklist=ref([])
onMounted(()=>{
	api.booklistApi().then(res=>{
		booklist.value=res.data.data
	})
	//兄弟组件互传
	mitt.on('myMsg',(data)=>{
		if(data=='flash'){
			flash()
		}
	})
})
const flash=()=>{
	api.booklistApi().then(res=>{
		booklist.value=res.data.data
	})
}
const borrow=(res)=>{
	if(localStorage.getItem('name')==null){
		emit('get-msg',"请先登录")
		return
	}
	dialogVisible.value = true
	detail.bookName=res.bookName
	detail.bookAuthor=res.bookAuthor
	detail.bookNum=res.bookNum
	detail.bookRemark=res.bookRemark
	detail.bookPrice=res.bookPrice
	detail.bookType=res.bookType
	detail.id=res.id
	
}
const detail=reactive({
	bookName:'',
	bookAuthor:'',
	bookRemark:'',
	bookNum:'',
	userId:'',
	returnTime:'',
	bookPrice:'',
	bookType:'',
	id:''
	

})
</script>

<style>
	.demo-date-picker {
	  display: flex;
	  width: 100%;
	  padding: 0;
	  flex-wrap: wrap;
	}
	
	.demo-date-picker .block {
	  padding: 30px 0;
	  text-align: center;
	  border-right: solid 1px var(--el-border-color);
	  flex: 1;
	}
	
	.demo-date-picker .block:last-child {
	  border-right: none;
	}
	
	.demo-date-picker .demonstration {
	  display: block;
	  color: var(--el-text-color-secondary);
	  font-size: 14px;
	  margin-bottom: 20px;
	}
	
	.el-descriptions {
	  margin-top: 20px;
	}
	.cell-item {
	  display: flex;
	  align-items: center;
	}
	.margin-top {
	  margin-top: 20px;
	}

	.el-card {
		min-width: 100%;
		margin-right: 20px;
		transition: all .5s;
	}
	.el-card:hover{
		margin-top: -5px;
	}
	.bottom {
		margin-top: 3px;
		line-height: 12px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.button {
		padding: 10px;
		min-height: auto;
	}
	.image {
		width: 100%;
		display: block;
	}
</style>
